<template>
  <view class="page">
    <fu-custom bgColor="bg-white text-333" :isBack="true">
      <block slot="content">{{i18n['新品预售']}}</block>
    </fu-custom>
    <view class="page-content" v-if="lists.length > 0">
      <block v-for="(item,index) in lists" :key="index">
        <view class="radius-24 bg-white padding-sm flex margin-bottom-sm" @tap="toDeatil(item)">
          <view class="block-246 radius overHidden">
			  <fu-image :src="item.thumb" mode="aspectFill"></fu-image>
          </view>
          <view class="flex-sub margin-left-sm flex flex-direction">
            <view class="text-333 text-df text-cut-2">{{item.name}}</view>
            <view class="text-sm text-999 margin-top-xs">{{item.sales_sum}}{{i18n['件已定']}}</view>
            <view class="margin-top flex justify-between">
              <view>
                <view class="fu-cred">
                  <text class="text-sm">{{i18n['预售价']}}</text>
                  <text class="text-price text-sm"></text>
                  <text class="text-xl">{{item.shop_price}}</text>
                </view>
                <view class="text-through margin-top-xs">
                  <text class="text-price text-sm"></text>
                  <text class="text-sm">{{item.market_price}}</text>
                </view>
              </view>
              <view>
                <view class="item-btn">{{i18n['抢']}}</view>
              </view>
            </view>
          </view>
        </view>
      </block>
    </view>
    <fu-empty-ui v-if="lists.length == 0 && isInit"></fu-empty-ui>
    <uni-load-more v-if="lists.length > 5" :status='status'></uni-load-more>
    <fu-notwork></fu-notwork>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        CustomBar: this.CustomBar,
        TabCur: 0,
        lists: [],
        status: 'more',
        page: 1,
        size: 10,
        isInit: false,
      }
    },
    onLoad() {
      this.loadData();
    },
    methods: {
      // 加载数据
      loadData() {
        if (this.status != 'more') return;
        this.status = 'loading';
        let data = {
          start_time: 0,
          end_time: 23,
          page: this.page,
          list_rows: this.size,
          type: 3,
        };
        this.$api.post(global.apiUrls.postSeckillList, data)
          .then(res => {
            if (res.statusCode == 200 && res.data.code == 1) {
              res = res.data;
              console.log('预售', res);
              var totalSize = res.data.total;
              var curPageData = res.data.list;
              if (this.page == 1) this.lists = [];
              this.lists = this.lists.concat(curPageData);
              if (this.lists.length < totalSize) {
                this.status = 'more';
                this.page++;
              } else {
                this.status = 'noMore';
              }
            }
            this.isInit = true;
            uni.stopPullDownRefresh();
          }).catch(err => {
            console.log('ERROR', err);
            uni.stopPullDownRefresh();
          })
      },
      // 去详情页
      toDeatil(item) {
        this.$urouter.navigateTo({
          url: '/pages/activity/advance/advance-detail/index',
          params: {
            goods_id: item.goods_id,
            sku_id: item.sku_id || 0,
            activity_id: item.activity_id || 0,
          }
        });
      }
    },
    onPullDownRefresh() {
      this.status = 'more';
      this.page = 1;
      this.loadData();

    },
    onReachBottom() {
      if (this.status == 'more') {
        this.loadData();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page {
    min-height: 100vh;
  }

  .page-content {
    padding: 32rpx;
  }

  .item-btn {
    width: 66rpx;
    height: 66rpx;
    font-size: 20rpx;
    color: #FFFFFF;
    border-radius: 8rpx;
    line-height: 66rpx;
    text-align: center;
    background: $bgtheme;
  }

  .radius-24 {
    border-radius: 24rpx;
  }

  .block-246 {
    width: 246rpx;
    height: 246rpx;
    min-width: 246rpx;
    min-height: 246rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .text-333 {
    color: #333333;
  }

  .text-999 {
    color: #999999;
  }

  .text-cut-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .text-through {
    text-decoration: line-through;
  }
</style>
